<template>
  <f7-block class="share_block">
    <!-- 无限滚动 -->
    <div
      class="page-content infinite-scroll-content  ptr-content"
      ref="share_block_page_content"
    >
      <!-- Default pull to refresh preloader-->
      <div class="ptr-preloader">
        <div class="preloader"></div>
        <div class="ptr-arrow"></div>
      </div>
      <div class="list share-list">
        <template v-for="(item, index) in sharedList">
          <!-- 三类组件，分享歌单组件、分享歌曲组件、评论组件以及添加评论、评论输入框 -->
          <v-sharedSong
            v-if="item.type === 'song'"
            :key="index"
            :songData="item"
            from="shared"
          />
          <v-sharedSongList
            v-if="item.type === 'songList'"
            :key="index"
            :songList="[item]"
            from="shared"
          />
          <v-shortComment
            :key="'c' + index"
            :ref="'c' + index"
            :commentType="item.type"
            :shareId="item.songListId ? item.songListId : item.songId"
          />
        </template>
      </div>
      <div class="preloader infinite-scroll-preloader"></div>
    </div>
  </f7-block>
</template>
<script>
import SharedSong from '@/components/sharedsong.vue'
import SharedSongList from '@/components/sharedsonglist.vue'
import ShortComment from '@/components/shortcomment.vue'
import { queryShare } from '@/api/share.js'
import Vue from 'vue'
export default {
  components: {
    'v-sharedSong': SharedSong,
    'v-sharedSongList': SharedSongList,
    'v-shortComment': ShortComment,
  },
  data() {
    return {
      // Loading flag
      allowInfinite: true,
      // Last loaded index
      lastItemIndex: 5,
      // Max items to load
      maxItems: 200,
      // Append items per load
      itemsPerLoad: 5,

      //查询分享的请求数据
      sharedQuery: {
        page: 1,
        limit: 5,
      },
      sharedSongTotalFromBack: -1,
      sharedSongListTotalFromBack: -1,
      sharedList: [
        // {
        //   type: 'song', //song:歌曲,songList:歌单,comment:评论
        //   clickCount: null,
        //   description: '',
        //   id: 3,
        //   sharedTime: null,
        //   songId: 53,
        //   songName: '',
        //   userId: 8,
        // },
      ],
    }
  },
  mounted() {
    let self = this
    // self.getData()
    self.handleData()
    //监听页面滚动条位置，是否显示回到顶部按钮
    this.$refs.share_block_page_content.addEventListener(
      'scroll',
      (e) => {
        // console.log('相对距离', this.$refs.share_block_page_content.scrollTop)
        if (this.$refs.share_block_page_content.scrollTop > 1000) {
          this.$emit('showToTop', 1)
        } else {
          this.$emit('showToTop', 0)
        }
      },
      false
    )
    this.$f7ready((f7) => {
      //无限滚动的监听
      self
        .$$(`.share_block .infinite-scroll-content`)
        .on('infinite', function() {
          console.log('infinite')
          // Exit, if loading in progress
          if (!self.allowInfinite) return

          // Set loading flag
          self.allowInfinite = false

          self.handleData()
        })
      //下拉刷新监听
      self.$$('.ptr-content').on('ptr:refresh', function(e) {
        //清空数据，重新获取数据
        self.init()
        f7.ptr.done() // or e.detail();
      })
    })
    //监听评论变化后，热评更新
    self.$bus.$off('updateHotComment').$on('updateHotComment', (type, id) => {
      console.log('updateHotComment', (type, id))
      let commentIndex = -1
      self.sharedList.forEach((item, index) => {
        if (item.type === type) {
          if (item.type === 'song') {
            if (item.songId === id) {
              commentIndex = index
            }
          } else if (item.type === 'songList') {
            if (item.songListId === id) {
              commentIndex = index
            }
          }
        }
      })
      if (commentIndex >= 0) {
        self.$refs['c' + commentIndex][0].init()
      }
    })
  },
  methods: {
    async init() {
      let self=this;
      this.allowInfinite = true
      this.sharedQuery = {
        page: 1,
        limit: 5,
      }
      this.sharedSongTotalFromBack = -1
      this.sharedSongListTotalFromBack = -1
      this.sharedList = []
      /* this.$$('.share_block .page-content')
        .append(`<div data-v-19e21f1e="" class="preloader infinite-scroll-preloader"><span class="preloader-inner">
          <span class="preloader-inner-gap"></span><span class="preloader-inner-left">
          <span class="preloader-inner-half-circle"></span></span><span class="preloader-inner-right">
          <span class="preloader-inner-half-circle"></span></span></span></div>`) */
      // this.$$('.share_block').addClass('infinite-scroll-content');
      // this.$f7ready((f7) => {
      //   f7.infiniteScroll.create(self.$$('.share_block'))
      // });
      this.$$('.share_block .infinite-scroll-preloader').css('display','block');
      this.handleData()
    },
    async getData() {
      let res = queryShare(this.sharedQuery)
      return Promise.resolve(res)
    },
    async handleData() {
      let self = this
      const res = await this.getData()
      this.$f7ready((f7) => {
        if (res.code === 200) {
          self.sharedSongTotalFromBack = res.data.sharedSongTotal
          self.sharedSongListTotalFromBack = res.data.sharedSongListTotal
          //处理数据展示
          let tSharedSongArr = res.data.sharedSongList
          let tSharedSongListArr = res.data.sharedSongListList
          tSharedSongArr.forEach((element) => {
            let obj = {}
            Object.assign(
              obj,
              {
                type: 'song',
              },
              element
            )
            Vue.set(self.sharedList, self.sharedList.length, obj)
          })

          tSharedSongListArr.forEach((element) => {
            let obj = {}
            Object.assign(
              obj,
              {
                type: 'songList',
              },
              element
            )
            Vue.set(self.sharedList, self.sharedList.length, obj)
          })
          console.log(self.sharedList)
          // Reset loading flag
          if (
            self.sharedList.length <
            self.sharedSongTotalFromBack + self.sharedSongListTotalFromBack
          ) {
            self.allowInfinite = true
            self.sharedQuery.page++
          } else {
            // Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
            // f7.infiniteScroll.destroy('.share_block .infinite-scroll-content')
            // Remove preloader
            self.$$('.share_block .infinite-scroll-preloader').css('display','none');

            return
          }
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.share_block {
  height: calc(94vh - 0.6rem - var(--f7-toolbar-height));
  margin: 3vh 0;
  overflow: auto;
  .page-content {
    padding-top: 0;
  }
}
</style>
